<!--
 * @Description: 文章列表组件
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-01-27 00:00:00
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-11-05 16:52:58
 * @FilePath: \BLOG\src\components\ArticleList\index.vue
-->
<template>
  <div class="article-wrap" v-if="articleList && articleList.length > 0">
    <div
      class="article-item"
      :class="['intersection-observer', 'hover-shadow', { 'm-article-item': isMobi }, { 'kbn-read': !isMobi }, { 'is-preview': item.isPreview === 1 }]"
      :style="{ marginBottom: index === articleList.length - 1 && page.total <= page.size ? '20px' : '0px' }"
      :data-tip="item.title.length > 16 ? item.title.slice(0, 16) + '...' : item.title"
      v-for="(item, index) in articleList"
      :key="item.id || index">
      <ArticleItem
        :item="item"
        :index="index"
        :isMobi="isMobi"
        :articleTypeList="articleTypeList"
        :colorMap="colorMap"
        :avatar="avatar"
        @article-click="$emit('article-click', $event)"
        @view-click="$emit('view-click', $event)"
        @type-click="$emit('type-click', $event)"
        @category-click="$emit('category-click', $event)" />
    </div>
  </div>
  <div class="no-article" :class="{ 'article-list': type != 'home', 'm-article-list': isMobi }" v-else>
    <Empty :text="isMobi ? '暂无文章，等待作者更新~' : '暂无文章，期待您的分享~'" :loadingText="'文章正在拼命加载中...'" :loading="loading" />
  </div>
</template>

<script setup lang="ts">
import ArticleItem from '@/components/ArticleItem/index.vue';

interface Props {
  articleList: any[];
  loading: boolean;
  isMobi: boolean;
  articleTypeList: any[];
  colorMap: Record<number, string>;
  avatar: string;
  type: string;
  page: {
    page: number;
    size: number;
    total: number;
  };
}

defineProps<Props>();

defineEmits<{
  'article-click': [item: any];
  'view-click': [item: any];
  'type-click': [type: number];
  'category-click': [label: string];
}>();
</script>

<style lang="scss" scoped>
.article-item {
  margin: 24px 0;
  border-radius: var(--border-radius-2);
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #fff;
}

.m-article-item {
  margin: 10px 0;
}

.no-article {
  width: 100%;
  padding: 20px 0;
  height: calc(100vh - 350px);
}
.article-list {
  height: calc(100vh - 400px);
}

.m-article-list {
  padding: 15px 0;
  height: calc(100vh - 300px);
}

.dark {
  .article-item {
    border-color: var(--border-color) !important;
  }
}
</style>
